import React, { useState, useEffect } from 'react'
import './style/Chart1.scss'
import Row_list from '@/components/Row_list/Row_list.jsx'
// import style from './Animalmanagement.module.css'
import * as echarts from "echarts";
// const Chart1 = forwardRef((props, ref) => {
export default function Chart1() {
    const [infodata, setdata] = useState([])
    const getdata = () => {
        // setdata(ref)

    }

    const drawbar = () => {


        var myChart = echarts.init(document.getElementById("Chart1_barli"));
        var option = {
            // backgroundColor: "#040D36",
            title: {
                text: "2023年天气灾害占比总量",
                textStyle: {
                    color: "#fff",
                    fontSize: "15",
                    fontWeight: "bolder",
                },
                subtextStyle: {
                    fontSize: 20
                }
            },
            tooltip: {
                trigger: "item",
                formatter: "{b}:{c} ({d}%)",
            },
            series: [
                {
                    type: "pie",
                    zlevel: 1,
                    silent: true,
                    radius: ["59%", "60%"],
                    label: {
                        normal: {
                            show: false,
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false,
                        },
                    },
                    data: _pie(),
                },
                {
                    type: "pie",
                    zlevel: 2,
                    silent: true,
                    radius: ["44%", "45%"],
                    label: {
                        normal: {
                            show: false,
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false,
                        },
                    },
                    data: _pie(),
                },
                {
                    type: "pie",
                    zlevel: 3,
                    silent: true,
                    radius: ["29%", "30%"],
                    label: {
                        normal: {
                            show: false,
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false,
                        },
                    },
                    data: _pie(),
                },
                {
                    type: "pie",
                    zlevel: 4,
                    silent: true,
                    radius: ["14%", "15%"],
                    label: {
                        normal: {
                            show: false,
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false,
                        },
                    },
                    data: _pie(),
                },
                {
                    type: "pie",
                    zlevel: 5,
                    radius: ["14%", "60%"],
                    center: ["50%", "50%"],
                    roseType: "area",
                    data: [
                        {
                            name: "暴雨洪水",
                            value: "620",
                            itemStyle: {
                                normal: {
                                    color: "rgba(255, 155, 92, 0.5)",
                                    borderColor: "rgba(255, 155, 92, 1)",
                                    borderWidth: 1,
                                },
                            },
                        },
                        {
                            name: "台风",
                            value: "580",
                            itemStyle: {
                                normal: {
                                    color: "rgba(36, 180, 255, 0.5)",
                                    borderColor: "rgba(36, 180, 255, 1)",
                                    borderWidth: 1,
                                },
                            },
                        },
                        {
                            name: "龙卷风",
                            value: "500",
                            itemStyle: {
                                normal: {
                                    color: "rgba(255, 201, 92, 0.5)",
                                    borderColor: "rgba(255, 201, 92, 1)",
                                    borderWidth: 1,
                                },
                            },
                        },
                        {
                            name: "雪灾",
                            value: "109",
                            itemStyle: {
                                normal: {
                                    color: "rgba(244, 255, 77, 0.5)",
                                    borderColor: "rgba(244, 255, 77, 1)",
                                    borderWidth: 1,
                                },
                            },
                        },
                        {
                            name: "高温热浪",
                            value: "424",
                            itemStyle: {
                                normal: {
                                    color: "rgba(115, 244, 64, 0.5)",
                                    borderColor: "rgba(115, 244, 64, 1)",
                                    borderWidth: 1,
                                },
                            },
                        },
                        {
                            name: "冰雹",
                            value: "424",
                            itemStyle: {
                                normal: {
                                    color: "rgba(115, 44, 64, 0.5)",
                                    borderColor: "rgba(115, 244, 64, 1)",
                                    borderWidth: 1,
                                },
                            },
                        },
                    ],
                    label: {
                        normal: {
                            color: "#88A8D6",
                        },
                    },
                    labelLine: {
                        normal: {
                            length2: 30,
                            lineStyle: {
                                color: "#88A8D6",
                            },
                        },
                    },
                },
                {
                    type: "gauge",
                    zlevel: 5,
                    splitNumber: 90,
                    radius: "69%",
                    center: ["50%", "50%"],
                    startAngle: 90,
                    endAngle: -269.9999,
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        length: 10,
                        lineStyle: {
                            width: 4,
                            color: "#132F8A",
                        },
                    },
                    pointer: {
                        show: 0,
                    },
                    detail: {
                        show: 0,
                    },
                },
                {
                    type: "pie",
                    zlevel: 6,
                    silent: true,
                    radius: ["72%", "73%"],
                    color: ["#041B4F", "#172F6C", "#041B4F", "#172F6C"],
                    hoverAnimation: false,
                    label: {
                        normal: {
                            show: false,
                        },
                    },
                    data: [1, 1, 1, 1],
                },
                {
                    type: "pie",
                    zlevel: 7,
                    silent: true,
                    radius: ["77%", "80%"],
                    hoverAnimation: false,
                    color: [
                        {
                            type: "linear",
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "rgba(6,15,56,0)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(18,52,133,1)",
                                },
                            ],
                            global: false,
                        },
                        {
                            type: "linear",
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "rgba(6,15,56,0)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(18,52,133,1)",
                                },
                            ],
                            global: false,
                        },
                        {
                            type: "linear",
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "rgba(6,15,56,0)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(18,52,133,1)",
                                },
                            ],
                            global: false,
                        },
                    ],
                    label: {
                        normal: {
                            show: false,
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false,
                        },
                    },
                    data: [1, 1, 1],
                },
            ],
        };

        function _pie() {
            let dataArr = [];
            for (var i = 0; i < 100; i++) {
                if (i % 2 === 0) {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 25,
                        itemStyle: {
                            normal: {
                                color: "rgb(3,56,92)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)",
                            },
                        },
                    });
                } else {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 20,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)",
                            },
                        },
                    });
                }
            }
            return dataArr;
        }


        myChart.setOption(option)

        // console.log(timer);
        window.onresize = () => {
            myChart.resize();
        }

    }
    const drawbar2 = () => {
        const yData = [1232, 1452, 1567, 1783, 2020]

        var myChart = echarts.init(document.getElementById("Chart1_barli2"));
        var option = {
            // backgroundColor: 'rgba(0, 55, 107)',
            title: {
                text: "历年降雨总量",
                // subtext: "Sub Title",
                left: "left",
                top: "top",
                textStyle: {
                    fontSize: "15",
                    color: "rgba(252, 252, 252, 1)"
                },
                subtextStyle: {
                    fontSize: 20
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                icon: 'stack',
                itemWidth: 10,
                itemHeight: 5,
                textStyle: {
                    fontSize: 14,
                    color: '#e0e1e2', // 设置字体颜色
                    padding: [10, 10] // 设置文字与图例的距离
                },
                itemGap: 20,// 设置图例项之间的间距
                itemStyle: {
                    borderWidth: 0
                }
            },
            grid: {
                bottom: '8%',
                left: '4%',
                right: '4%',
                containLabel: true
            },
            xAxis: {
                data: ['2019年', '2020年', '2021年', '2022年', '2023年'],
                axisTick: {
                    show: false
                },
                axisLabel: {
                    interval: 1,
                    color: 'rgba(255,255,255)', //更改坐标轴文字颜色
                    fontSize: 12, //更改坐标轴文字大小
                    margin: 20
                },
            },
            yAxis: [
                {
                    // name: '温度',
                    type: 'value',
                    min: "0",
                    // max: 100,
                    splitLine: {
                        show: false
                    },
                    splitLine: {
                        interval: 0,
                        show: true, // 开启分割线
                        lineStyle: {
                            color: 'rgba(6, 88, 142)',
                            width: 2,
                            type: [6, 3],
                        },
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: 'rgba(207, 219, 230)'
                    },
                    position: 'left',
                }
            ],
            series: {
                name: '降雨总量',
                type: 'bar',
                barWidth: '20%',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(84,115,232,1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(24,144,255,0.6)'
                        }
                    ])
                    // shadowColor: '#3C97F2',
                    // shadowBlur: 5,
                },
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        fontSize: 12
                    }
                },
                data: yData
            }
        }
        myChart.setOption(option)

        // console.log(timer);
        window.onresize = () => {
            myChart.resize();
        }

    }
    const drawbar3 = () => {
        var myChart = echarts.init(document.getElementById("Chart1_barl3"));
        var option = {
            // backgroundColor: "#404A59",
            color: ["#ffd285", "#ff733f", "#ec4863"],

            title: [
                {
                    text: "男女人数增长趋势",
                    left: "1%",
                    top: "6%",
                    textStyle: {
                        color: "#fff",
                    },
                },
                {
                    text: "用户来源占比",
                    left: "83%",
                    top: "6%",
                    textAlign: "center",
                    textStyle: {
                        color: "#fff",
                    },
                },
            ],
            tooltip: {
                trigger: "axis",
            },
            legend: {
                x: 300,
                top: "1%",
                textStyle: {
                    color: "#ffd285",
                },
                data: ["男", "女", "未知"],
            },
            grid: {
                left: "1%",
                right: "35%",
                top: "16%",
                bottom: "6%",
                containLabel: true,
            },
            toolbox: {
                show: false,
                feature: {
                    saveAsImage: {},
                },
            },
            xAxis: {
                type: "category",
                axisLine: {
                    lineStyle: {
                        color: "#FF4500",
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    textStyle: {
                        color: "#fff",
                    },
                },
                boundaryGap: false,
                data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
            },
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: "#fff",
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "#fff",
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    textStyle: {
                        color: "#fff",
                    },
                },
                type: "value",
            },
            series: [
                {
                    name: "男",
                    smooth: true,
                    type: "line",
                    symbolSize: 8,
                    symbol: "circle",
                    data: [90, 50, 39, 50, 120, 82, 80],
                },
                {
                    name: "女",
                    smooth: true,
                    type: "line",
                    symbolSize: 8,
                    symbol: "circle",
                    data: [70, 50, 50, 87, 90, 80, 70],
                },
                {
                    name: "未知",
                    smooth: true,
                    type: "line",
                    symbolSize: 8,
                    symbol: "circle",
                    data: [290, 200, 20, 132, 15, 200, 90],
                },
                {
                    type: "pie",
                    center: ["83%", "33%"],
                    radius: ["25%", "30%"],
                    label: {
                        normal: {
                            position: "center",
                        },
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    data: [
                        {
                            value: 335,
                            name: "第三方",
                            tooltip: {
                                trigger: 'item'
                            },
                            itemStyle: {
                                normal: {
                                    color: "#ffd285",
                                },
                            },
                            label: {
                                normal: {
                                    formatter: "{d} %",
                                    textStyle: {
                                        color: "#ffd285",
                                        fontSize: 20,
                                    },
                                },
                            },
                        },
                        {
                            value: 180,
                            name: "QQ",
                            tooltip: {
                                trigger: 'item'
                            },
                            itemStyle: {
                                normal: {
                                    color: "#87CEFA",
                                },
                            },
                            // label: {
                            //     normal: {
                            //         textStyle: {
                            //             color: "#ffd285",
                            //         },
                            //         formatter: "\n手机号注册",
                            //     },
                            // },
                        },
                    ],
                },

                {
                    type: "pie",
                    center: ["83%", "72%"],
                    radius: ["25%", "30%"],
                    label: {
                        normal: {
                            position: "center",
                        },
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    data: [
                        {
                            value: 435,
                            name: "第三方",
                            itemStyle: {
                                normal: {
                                    color: "#ff733f",
                                },
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            label: {
                                normal: {
                                    formatter: "{d} %",
                                    textStyle: {
                                        color: "#ff733f",
                                        fontSize: 20,
                                    },
                                },
                            },
                        },
                        {
                            value: 100,
                            name: "手机号",
                            tooltip: {
                                trigger: 'item'
                            },
                            itemStyle: {
                                normal: {
                                    color: "#87CEFA",
                                },
                            },
                            label: {
                                normal: {
                                    textStyle: {
                                        color: "#FF4500",
                                    },
                                    formatter: "\n三方快捷登陆",
                                },
                            },
                        },
                    ],
                },
            ],
        };

        myChart.setOption(option)

        // console.log(timer);
        window.onresize = () => {
            myChart.resize();
        }

    }


    const dataFormatter = (obj) => {
        var pList = ["广东", "河南", "河北", "陕西", "广西", "其他"];
        var temp;
        for (var year = 201808; year <= 201812; year++) {
            var max = 0;
            var sum = 0;
            temp = obj[year];
            for (var i = 0, l = temp.length; i < l; i++) {
                max = Math.max(max, temp[i]);
                sum += temp[i];
                obj[year][i] = {
                    name: pList[i],
                    value: temp[i],
                };
            }
            obj[year + "max"] = Math.floor(max / 100) * 100;
            obj[year + "sum"] = sum;
        }
        console.log(obj);
        return obj;
    }
    const drawbar4 = () => {
        var dataMap = {};

        // function dataFormatter(obj) {

        // }

        dataMap.data = dataFormatter({
            201808: [150, 200, 100, 100, 200, 50],
            201809: [10, 220, 80, 90, 230, 140, 430],
            201810: [20, 220, 20, 240, 340, 160],
            201811: [120, 20, 30, 330, 60, 222],
            201812: [210, 20, 140, 130, 190, 122],
        });

        dataMap.dataGD = dataFormatter({
            201808: [150],
            201809: [220],
            201810: [110],
            201811: [40],
            201812: [20],
        });

        dataMap.dataHN = dataFormatter({
            201808: [200],
            201809: [10],
            201810: [220],
            201811: [220],
            201812: [120],
        });

        dataMap.dataHB = dataFormatter({
            201808: [100],
            201809: [20],
            201810: [320],
            201811: [22],
            201812: [120],
        });

        dataMap.dataSX = dataFormatter({
            201808: [100],
            201809: [240],
            201810: [20],
            201811: [20],
            201812: [110],
        });
        dataMap.dataGX = dataFormatter({
            201808: [200],
            201809: [34],
            201810: [44],
            201811: [34],
            201812: [78],
        });
        dataMap.dataQT = dataFormatter({
            201808: [50],
            201809: [90],
            201810: [30],
            201811: [230],
            201812: [87],
        });
        var myChart = echarts.init(document.getElementById("Chart1_barli4"));
        var option = {
            baseOption: {
                timeline: {
                    axisType: "category", // realtime: false, // loop: false,
                    autoPlay: false, // currentIndex: 2,
                    playInterval: 1000, // controlStyle: { //     position: 'left' // },
                    data: ["8月", "9月", "10月", "11月", "12月"],
                },
                title: [
                    {
                        text: "主要省份占比",
                        // subtext: "800万户",
                        left: "center",
                        top: "20%",
                        padding: [24, 0],
                        textStyle: {
                            fontSize: 18 * 1,
                            align: "center",
                            fontWeight: "bolder",
                            color: "rgba(255, 255, 255, 1)"
                        },
                    },
                ],
                calculable: true,
                grid: {
                    top: "50%",
                    bottom: 80,
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                    },
                },
                xAxis: [
                    {
                        type: "value",
                        boundaryGap: [0, 0.01],
                        axisLabel: {
                            //	formatter: '{value}%',
                            // textStyle: {
                            //color: '#fff',
                            fontWeight: "80",
                            // },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "category",
                        data: ["广东", "河南", "河北", "陕西", "广西", "其他"],
                    },
                ],
                series: [
                    {
                        name: "生产量",
                        type: "bar",
                    },
                    {
                        name: "生产量占比",
                        type: "pie",
                        emphasis: {
                            // normal: {
                            show: true,
                            position: "outside",
                            formatter: "{b} : {c} ({d}%)",
                            // },
                            label: {
                                show: true,
                                //   textStyle: {
                                fontSize: "15",
                                fontWeight: "normal",
                                //   },
                            },
                        },
                        radius: ["30%", "40%"],
                        center: ["50%", "25%"],
                    },
                ],
            },
            options: [
                {
                    // title: {text: '1998年能源生产量与结构'},
                    series: [
                        {
                            data: dataMap.data["201808"],
                        },
                        {
                            data: [
                                {
                                    name: "广东",
                                    value: dataMap.dataGD["201808sum"],
                                },
                                {
                                    name: "河南",
                                    value: dataMap.dataHN["201808sum"],
                                },
                                {
                                    name: "河北",
                                    value: dataMap.dataHB["201808sum"],
                                },
                                {
                                    name: "陕西",
                                    value: dataMap.dataSX["201808sum"],
                                },
                                {
                                    name: "广西",
                                    value: dataMap.dataGX["201808sum"],
                                },
                                {
                                    name: "其他",
                                    value: dataMap.dataQT["201808sum"],
                                },
                            ],
                        },
                    ],
                },
                {
                    series: [
                        {
                            data: dataMap.data["201809"],
                        },
                        {
                            data: [
                                {
                                    name: "广东",
                                    value: dataMap.dataGD["201809sum"],
                                },
                                {
                                    name: "河南",
                                    value: dataMap.dataHN["201809sum"],
                                },
                                {
                                    name: "河北",
                                    value: dataMap.dataHB["201809sum"],
                                },
                                {
                                    name: "陕西",
                                    value: dataMap.dataSX["201809sum"],
                                },
                                {
                                    name: "广西",
                                    value: dataMap.dataGX["201809sum"],
                                },
                                {
                                    name: "其他",
                                    value: dataMap.dataQT["201809sum"],
                                },
                            ],
                        },
                    ],
                },
                {
                    series: [
                        {
                            data: dataMap.data["201810"],
                        },
                        {
                            data: [
                                {
                                    name: "广东",
                                    value: dataMap.dataGD["201810sum"],
                                },
                                {
                                    name: "河南",
                                    value: dataMap.dataHN["201810sum"],
                                },
                                {
                                    name: "河北",
                                    value: dataMap.dataHB["201810sum"],
                                },
                                {
                                    name: "陕西",
                                    value: dataMap.dataSX["201810sum"],
                                },
                                {
                                    name: "广西",
                                    value: dataMap.dataGX["201810sum"],
                                },
                                {
                                    name: "其他",
                                    value: dataMap.dataQT["201810sum"],
                                },
                            ],
                        },
                    ],
                },
                {
                    series: [
                        {
                            data: dataMap.data["201811"],
                        },
                        {
                            data: [
                                {
                                    name: "广东",
                                    value: dataMap.dataGD["201811sum"],
                                },
                                {
                                    name: "河南",
                                    value: dataMap.dataHN["201811sum"],
                                },
                                {
                                    name: "河北",
                                    value: dataMap.dataHB["201811sum"],
                                },
                                {
                                    name: "陕西",
                                    value: dataMap.dataSX["201811sum"],
                                },
                                {
                                    name: "广西",
                                    value: dataMap.dataGX["201811sum"],
                                },
                                {
                                    name: "其他",
                                    value: dataMap.dataQT["201811sum"],
                                },
                            ],
                        },
                    ],
                },
                {
                    series: [
                        {
                            data: dataMap.data["201812"],
                        },
                        {
                            data: [
                                {
                                    name: "广东",
                                    value: dataMap.dataGD["201812sum"],
                                },
                                {
                                    name: "河南",
                                    value: dataMap.dataHN["201812sum"],
                                },
                                {
                                    name: "河北",
                                    value: dataMap.dataHB["201812sum"],
                                },
                                {
                                    name: "陕西",
                                    value: dataMap.dataSX["201812sum"],
                                },
                                {
                                    name: "广西",
                                    value: dataMap.dataGX["201812sum"],
                                },
                                {
                                    name: "其他",
                                    value: dataMap.dataQT["201812sum"],
                                },
                            ],
                        },
                    ],
                },
            ],
        };
        myChart.setOption(option)

        // console.log(timer);
        window.onresize = () => {
            myChart.resize();
        }

    }

    useEffect(() => {
        // drawbar()
        // drawbar2()
        // drawbar3()
        // drawbar4()
        console.log(infodata);
        // getdata()

    }, [])
    // console.log(ref);
    return (
        <div className='chart_contant'>
            <div className='Chart1_showli'>
                {/* {drawlist()} */}
                <Row_list />
                {/* <div id='Chart1_barli'></div> */}
            </div>
    
        </div>
    )
    // })
}

// export default Chart1